<template>
  <div class="list">
    <div class="list_content">
      <div class="header">
        <div class="title"><span></span>问题反馈</div>
      </div>
      <div class="search_box flex space_between">
        <div class="search">
          <a-input v-model:value="keyword" placeholder="请输入关键词搜素">
            <template #suffix>
              <SearchOutlined style="color: rgba(0, 0, 0, 0.25)" />
            </template>
          </a-input>
          <a-button @click="getList" type="primary">查询</a-button>
        </div>
        <div class="group_button">
          <a-button @click="handleAdd" type="primary">新增</a-button>
        </div>
      </div>
      <a-table :scroll="{ x: 0, y: tableHeight }" :data-source="tableData" :columns="tableColumns" :pagination="pagination">
        <template #bodyCell="{ column, record,index}">
          <template v-if="column.key === 'index'">
            <span>{{index + 1}}</span>
          </template>
          <template v-if="column.key === 'state'">
            <span>{{record.state == 0?"未处理":"已处理"}}</span>
          </template>
          <template v-if="column.key === 'system'">
            <span>{{record.system == 0?"打印机移动端":"打印工作站"}}</span>
          </template>
          <template v-if="column.key === 'caozuo'">
            <a @click="handleDetails(record.id)">查看详情</a>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import api from '@/api/problem'
import { SearchOutlined } from '@ant-design/icons-vue';
import column from './js/column'
export default {
  name: 'List',
  data() {
    return {
      keyword: '',
      tableColumns: column.tableColumns,
      tableData:[{
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号'}],
      tableHeight: document.body.clientHeight - 406,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'],
        onChange: (current) => {
          this.pagination.current = current;
          this.getList();
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize;
          this.getList();
        }
      },
    }
  },
  components: {
    SearchOutlined,
  },
  created() {
    window.addEventListener('resize', this.setTableheight);
    this.getList();
  },
  methods: {
    setTableheight() {
      this.tableHeight = document.body.clientHeight - 406;
    },
    // 获取列表
    getList() {
      const postData = {
        system: "1",
        pageIndex: this.pagination.current,
        pageSize: this.pagination.pageSize,
        keyword: this.keyword
      };
      api.getProblemList(postData).then(res => {
        this.tableData = res.data.list.filter(item=> !item.isHotspot);;
        this.pagination.total = res.data.total;
      })
    },
    // 新增
    handleAdd() {
      this.$router.push({
        path: "/list/add", query: {
          ishot: false
        }
      })
    },
    // 详情
    handleDetails(id) {
      this.$router.push(`/list/details/${id}`)
    }
  },
}
</script>
<style lang="scss" scoped>
@import "./css/list.scss";
</style>
